<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GIS 坐标转换</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        .margin-top-100{
            margin-top: 100px;
        }
        .radio-inline-box{
            padding: 10px;
            margin: 0;
        }
        .radio-inline-box .input-group>label{
            display: inline-block;
            margin-right: 10px;
            letter-spacing: 1px;
        }
    </style>
</head>
<body>
    <div class="container margin-top-100">
        <div class="row">
            <div class="col-md-12">
                <h2>坐标转换器</h2>
            </div>
            <div class="col-md-12">
                <form>
                    <div class="form-group radio-inline-box">
                        <label class="sr-only">当前坐标类型</label>
                        <div class="input-group">
                            <label>
                                <input type="radio" name="type" value="1">
                                WGS84
                            </label>
                            <label>
                                <input type="radio" name="type" value="2">
                                GCJ-02
                            </label>
                            <label>
                                <input type="radio" name="type" value="3">
                                BD-09
                            </label>
                        </div>
                    </div>
                    <div class="form-inline">
                        <div class="form-group">
                            <label class="sr-only" for="exampleInputAmount">坐标：</label>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="lng" name="lng">
                                <div class="input-group-addon">,</div>
                                <input type="text" class="form-control" placeholder="lat" name="lat">
                            </div>
                        </div>
                        <button type="button" id="submitBtn" class="btn btn-primary">转换</button>
                    </div>
                    <div class="form-group radio-inline-box">
                        <label class="sr-only">转换类型</label>
                        <div class="input-group">
                            <label>
                                <input type="radio" name="to" value="1">
                                转 WGS84
                            </label>
                            <label>
                                <input type="radio" name="to" value="2">
                                转 GCJ-02
                            </label>
                            <label>
                                <input type="radio" name="to" value="3">
                                转 BD-09
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-12">
                结果：<span class="result"></span>
            </div>
        </div>
    </div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://apps.bdimg.com/libs/layer/2.1/layer.js"></script>
<script src="./js/index.js"></script>
<script>
    $(function(){
        $('#submitBtn').click(function(){
            var lng = $('input[name=lng]').val();
            var lat = $('input[name=lat]').val();
            var type = $('input[name=type]:checked').val();
            var to = $('input[name=to]:checked').val();

            if(lng.length <= 0 || lat.length <= 0){
                layer.msg("请输入经纬度后再转换！");
                return false;
            }
            if(type == undefined){
                layer.msg("请选择坐标类型！");
                return false;
            }
            if(to  == undefined){
                layer.msg("请选择需要转换的类型");
                return false;
            }
            if(type == to){
                $('.result').text([lng,lat]);
            }else{
                $('.result').text(tsfm(lng,lat)[type+""+to]||"");
            }
        });
        /**
         * 1: WGS84
         * 2: GCJ-02
         * 3: BD-09
         */
        var tsfm = function(lng, lat){
            return {
                "12": function(){
                    return coordtransform.wgs84togcj02(lng, lat); //
                },
                "13": function(){
                    var p = coordtransform.wgs84togcj02(lng, lat);
                    return coordtransform.gcj02tobd09(p[0],p[1]);
                },
                "21": function(){
                    return coordtransform.gcj02towgs84(lng, lat); //
                },
                "23": function(){
                    return coordtransform.gcj02tobd09(lng, lat); //
                },
                "31": function(){
                    var p = coordtransform.bd09togcj02(lng, lat);
                    return coordtransform.gcj02towgs84(p[0], p[1]);
                },
                "32": function(){
                    return coordtransform.bd09togcj02(lng, lat); //
                }
            }
        }
    });
</script>
</body>
</html>